<template>
	<view class="errand-form">
		<!-- 帮助内容 -->
		<view class="form-item">
			<text class="label">帮助内容:</text>
			<textarea class="textarea" placeholder="请输入帮助信息" v-model="helpContent" />
		</view>
		
		<!-- 取货地点 -->
		<view class="form-item">
			<text class="label">取货地点:</text>
			<view class="input-with-icon">
				<input class="input" type="text" placeholder="输入取货地点" v-model="pickUpAddress" />
				<text class="location-icon">⊙</text>
			</view>
		</view>
		
		<!-- 收货地址 -->
		<view class="form-item">
			<text class="label">收货地址:</text>
			<input class="input" type="text" placeholder="输入收货地址" v-model="address" />
		</view>
		
		<!-- 金额 -->
		<view class="form-item">
			<text class="label">金额:</text>
			<input class="input" type="number" placeholder="输入金额" v-model="addMoney" @input="calculateTotal" />
			<view class="fee-info">
				<text class="fee-label">跑腿费</text>
				<text class="fee-amount">{{ baseFee }}元</text>
			</view>
			<view class="total-amount">
				<text>最终金额: {{ totalAmount }}元</text>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<button class="submit-btn" @click="submit">立即发布</button>
	</view>
</template>

<script>
	import {orderAdd} from '../../api/index.js'
	export default {
		data() {
			return {
				helpContent: '',
				pickUpAddress: '',
				address: '',
				addMoney: '',
				baseFee: 10
			}
		},
		computed: {
			totalAmount() {
				return Number(this.addMoney) + this.baseFee
			}
		},
		methods: {
			calculateTotal(e) {
				// 可以在这里添加额外的金额验证逻辑
			},
			submit() {
				// 判断输入是否为空
				if(!this.helpContent.trim() || !this.pickUpAddress.trim() || !this.address.trim()) {
					uni.showToast({
						title: "输入不全",
						icon: "none"
					})
					return;
				}

				// 构造表单的数据
				let info = {
					heloContetn: this.helpContent,
					pickupAddress: this.pickUpAddress,
					phone: uni.getStorageSync("userInfo").phoneNum,
					user_pic: uni.getStorageSync("userInfo").user_pic
				}

				// 构造数据提交到后台
				let obj = {
					type: '校园跑腿',
					money: Number(10) + Number(this.addMoney),
					state: 0,
					address: this.address,
					orderInfo: JSON.stringify(info),
					user_id: uni.getStorageSync("userInfo").id
				}

				// 调用接口提交数据
				orderAdd(obj).then(res => {
					if(res.data.status === 0) {
						uni.showToast({
							title: "提交成功"
						})
						setTimeout(() => {
							// 判断是否可以返回上一页
							const pages = getCurrentPages()
							if (pages.length > 1) {
								uni.navigateBack()
							} else {
								// 如果是首页，跳转到指定页面
								uni.switchTab({
									url: '/pages/index/index' 
								})
							}
						}, 700)
					} else {
						uni.showToast({
							title: "提交失败",
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style>
	.errand-form {
		padding: 20rpx;
		background: #fff;
	}

	.form-item {
		margin-bottom: 20rpx;
	}

	.label {
		display: block;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		color: #333;
	}

	.input {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		box-sizing: border-box;
	}

	.textarea {
		width: 100%;
		height: 160rpx;
		padding: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		box-sizing: border-box;
	}

	.input-with-icon {
		position: relative;
	}

	.location-icon {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #666;
	}

	.fee-info {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		color: #666;
		font-size: 26rpx;
	}

	.total-amount {
		margin-top: 10rpx;
		text-align: right;
		color: #ff4400;
		font-size: 28rpx;
	}

	.submit-btn {
		margin-top: 40rpx;
		background-color: #007AFF;
		color: #fff;
	}
</style>
